<template>
	<view class="bigbox">
		<view class="search" >
			<image class="search_img" src="@/static/icon_xx@2x.png" mode=""></image>
			<view class="serarch_input" @tap="goSearch()">
				<image src="@/static/10.png" mode="" class="bg_img" @tap="onclick()"></image>
				<input type="text" value="" v-model="inputText" :placeholder="searching[i]" class="bg_text" />
			</view>
			<!-- <view class="bg"> -->

			<!-- </view> -->
		</view>
		<view class="main_nav">
			<view class="main_ul">
				<view class="main_li" @tap="saoyisao">
					<image class="main_li_img" src="@/static/icon_sys@2x.png" mode=""></image>
					<text class="main_li_txt">\n扫一扫</text>
				</view>
				<navigator url="/pages/QRcode/QRcode">
					<view class="main_li">
						<image class="main_li_img" src="@/static/icon_fkm@2x.png" mode=""></image>
						<text class="main_li_txt">\n付款码</text>
					</view>
				</navigator>
				<view class="main_li">
					<image class="main_li_img" src="@/static/icon_qlc@2x.png" mode=""></image>
					<text class="main_li_txt">\n趣理财</text>
				</view>
				<view class="main_li">
					<image class="main_li_img" src="@/static/icon_kqb@2x.png" mode=""></image>
					<text class="main_li_txt">\n卡卷包</text>
				</view>
			</view>
		</view>
		<view class="content">

			<view class="content_side">
				<template v-for="item in content_li">
					<view v-if="item.tabbar" @tap="gotabbar" :key="item._id">
						<view class="content_side_box">
							<image :src="item.img" mode="" class="content_side_box_img"></image>
							<text class="content_side_box_text">\n{{item.name}}</text>
						</view>
					</view>
					<navigator v-else :url="item.url" :key="item._id">
						<view class="content_side_box">
							<image :src="item.img" mode="" class="content_side_box_img"></image>
							<text class="content_side_box_text">\n{{item.name}}</text>
						</view>
					</navigator>
				</template>
			</view>
		</view>

		<view class="banner">
			<swiper  :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :autoplay="true" :circular="true"
				:interval="3000" :duration="1000" style="height:165rpx">
				<swiper-item>
					<view class="swiper-item">
						<view class="banner_box">
							<image src="@/static/tupian_shouye_caifuxuanze.png" class="banner_nav">

							</image>
							<view class="banner_txt">
								<text class="banner_text_1">您选择我们，财富选择您。</text>
								<text class="banner_text_2">\n雨点金融，融惠辉煌。</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="banner_box">
							<image src="@/static/tupian_shouye_yudianfuli@2x.png" class="banner_nav" mode="aspectFill">

							</image>
							<view class="banner_txt">
								<text class="banner_text_1">您选择我们，财富选择您。</text>
								<text class="banner_text_2">\n雨点金融，融惠辉煌。</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="banner_box">
							<image src="@/static/tupian_shouye_yudianfuli2.png" class="banner_nav">

							</image>
							<view class="banner_txt">
								<text class="banner_text_1">您选择我们，财富选择您。</text>
								<text class="banner_text_2">\n雨点金融，融惠辉煌。</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 	<swiper class="swiper-item"  :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper> -->

		</view>
		<home></home>
		<view class="welfare">
			<view class="welfare_txt">
				<text class="welfare_txt_1">雨点福利</text>
			</view>
			<view class="welfare_txt_img imgt1">
				<text class="welfare_txt_head">雨点福利一网打尽</text>
				<text class="welfare_txt_content">\n高额信用卡秒批复</text>
			</view>
			<view class="welfare_txt_img imgt2">
				<text class="welfare_txt_head">移动福利足不出户</text>
				<text class="welfare_txt_content">\n便捷充值永不停机</text>
			</view>
		</view>
		<view class="end">
			<view class="end_tex0">
				<text>小雨点金融·守护每份好期待</text>
			</view>
			<view class="end_tex1">
				<text>持牌机构·1亿+注册用户·安全备案</text>
			</view>
			<view class="end_tex2">
				<text>了解小雨点金融</text>
			</view>
		</view>
		<erweima></erweima>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	import home from '../../components/index/home'
	export default {
		components: {
			home
		},
		data() {
			return {
				dotStyle: true,
				// bjUrl:"background: url(../../static/beijing.png);background-size: 130%;background-repeat: no-repeat;background-position: center -120rpx;",
				// imgt1Url:"background: url(../../static/tupian_shouye_yudianfuli@2x.png);background-repeat: no-repeat;background-size: 100%;",
				// imgt2Url:"background: url(../../static/tupian_shouye_yudianfuli2.png);background-repeat: no-repeat;background-size: 100%;",
				inputText: "",
				title: 'Hello',
				searching: ["女海王", "八卦新闻来了", "马云被抓了", "组长跑路了", "日本核废水"],
				i: 1,
				content_li: [{
						_id: 1,
						img: "/static/icon_jgq_yxd@2x.png",
						name: "优选贷",
						url: "/pages/loans/loans",
						tabbar: true
					},
					{
						_id: 2,
						img: "/static/icon_jgq_jj@2x.png",
						name: "基金",
						url: "/pagesA/fund/fund"
					},
					{
						_id: 3,
						img: "/static/icon_jgq_gp@2x.png",
						name: "股票",
						url: "/pagesC/stock/stock"
					},
					{
						_id: 4,
						img: "/static/icon_jgq_mrqd@2x.png",
						name: "每日签到",
						url: "/pagesC/signIn/signIn"
					},
					{
						_id: 5,
						img: "/static/icon_jgq_bz@2x.png",
						name: "保障",
						url: "/pagesC/welfareGuarantee/welfareGuarantee"
					},
					{
						_id: 6,
						img: "/static/icon_jgq_xyk@2x.png",
						name: "信用卡",
						url: "/pagesB/bankCard/bankCard"
					},
					{
						_id: 7,
						img: "/static/icon_jgx_bx@2x.png",
						name: "保险",
						url: "/pagesB/insurance/insurance"
					},
					{
						_id: 8,
						img: "/static/icon_jgq_gd@2x.png",
						name: "更多",		
						url: "/pagesD/search/search"
					},
				]
			}
		},
		onLoad() {
			setInterval(() => {
				this.i++;
				if (this.i > (this.searching.length) - 1) this.i = 0
			}, 1000);
			
			if(uni.getStorageSync('userid')){
					this.getUserInfo()
			}
		
		},
		computed:{
			...mapState(['userInfo']),
		},
		methods: {
			...mapActions(['getUserInfo']),
			saoyisao() {
				wx.scanCode({
					success: (res) => {
						console.log(res)
					}
				})
			},
			zhifu() {
				
			},
			navto() {

			},
			gotabbar() {
				console.log('1111')
				uni.switchTab({
					url: "/pages/loans/loans"
				})
			},
			onclick() {
				this.inputText = this.searching[this.i];
				console.log(this.inputText)
			},
			pay() {
			uni.navigateTo({
				url: "../QRcode/QRcode"
			})
			},
			goSearch(){
				uni.navigateTo({
					url:"../../pagesD/search/search"
				})
			}

		}
	}
</script>
<style scoped lang="scss">
	.bigbox {
		background: url(@/static/beijing.png);
		background-size: 130%;
		background-repeat: no-repeat;
		background-position: center -120rpx;
	}

	.search {
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-top: 20rpx;
		display: flex;
		width: 750rpx;

		.search_img {
			width: 48rpx;
			height: 44rpx;
			margin-top: 10rpx;
		}

		.serarch_input {
			width: 598rpx;
			height: 54rpx;
			background-color: #a8cef8;
			border-radius: 6rpx;
			opacity: 0.92;
			display: flex;
			margin-left: 20rpx;
			font-size: 30rpx;
			overflow: hidden;
			display: flex;
			align-items: center;

			.bg_img {
				width: 50rpx;
				height: 50rpx;
				margin-left: 16rpx;

			}

			.bg_text {
				margin-left: 30rpx;
			}
		}

		.bg {
			width: 750rpx;
			height: 636rpx;
			margin: 0 auto;
			background: #1778E6;
			border-radius: 50%;
			opacity: 1;
			position: absolute;
			z-index: -1;
			top: -100rpx;
			left: 0rpx;
			transform: scale(1.3);

		}

	}

	.main_nav {
		box-sizing: border-box;
		padding: 40rpx;
		margin-top: 34rpx;

		.main_ul {
			display: flex;
			justify-content: space-evenly;

			.main_li {

				.main_li_img {
					width: 88rpx;
					height: 88rpx;
				}

				.main_li_txt {
					width: 96rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 44rpx;
					letter-spacing: 0rpx;
					color: #ffffff
				}
			}
		}
	}

	.content {
		box-sizing: border-box;
		padding: 40rpx;

		.content_side {
			width: 670rpx;
			padding-bottom: 15rpx;
			height: 348rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 12rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.content_side_box {
				text-align: center;
				width: 150rpx;
				box-sizing: border-box;
				padding-top: 24rpx;
				height: 120rpx;

				.content_side_box_img {
					width: 88rpx;
					height: 88rpx;

				}

				.content_side_box_text {
					width: 72rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #474747;
					margin-top: -10rpx;
				}
			}
		}
	}

	.banner {
		width: 750rpx;
		box-sizing: border-box;
		padding: 40rpx;
		padding-top: 24rpx;

		.banner_box {
			box-sizing: border-box;
			border-radius: 30rpx;

			.banner_txt {
				box-sizing: border-box;
				padding: 40rpx;
			}

			.banner_nav {
				width: 672rpx;
				height: 160rpx;
				opacity: 0.72;
				position: absolute;
				z-index: -1;

			}

			.banner_text_1 {
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: 0rpx;
				color: #ffffff;

			}

			.banner_text_2 {
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #ffffff;

			}
		}
	}

	.welfare {
		box-sizing: border-box;
		padding: 40rpx;
		margin-top: 24rpx;
		padding-bottom: 0rpx;

		.welfare_txt {
			font-size: 32rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 44rpx;
			letter-spacing: 0rpx;
			color: #161616;
		}

		.welfare_txt_img {
			width: 670rpx;
			height: 146rpx;
			background-color: #007aff;
			border-radius: 12rpx;
			margin-top: 24rpx;
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;

			.welfare_txt_head {
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
			}

			.welfare_txt_content {
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #f2f2f2;
			}
		}

		.imgt1 {
			background: url(../../static/tupian_shouye_yudianfuli@2x.png);
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.imgt2 {
			background: url(../../static/tupian_shouye_yudianfuli2.png);
			background-repeat: no-repeat;
			background-size: 100%;
		}
	}

	.end {
		box-sizing: border-box;
		padding: 40rpx;
		text-align: center;
		padding-top: 0rpx;

		.end_tex0 {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 34rpx;
			letter-spacing: 0rpx;
			color: #474747;
			margin-top: 24rpx;
		}

		.end_tex1 {
			font-size: 20rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 28rpx;
			letter-spacing: 0rpx;
			color: #acacac;
			margin-top: 16rpx;
		}

		.end_tex2 {

			width: 178rpx;
			height: 38rpx;
			border-radius: 20rpx;
			border: solid 2rpx #c4c4c4;
			font-size: 20rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 38rpx;
			letter-spacing: 0rpx;
			color: #474747;
			margin: 0 auto;
			margin-top: 16rpx;
		}
	}
</style>
